<template>
  <div class="order-form-container">
    <el-card>
      <el-descriptions
        :column="3"
        border
      >
        <!-- 第一行 -->
        <el-descriptions-item
          label="订单号"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.JM_WORKORDERID }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="计划类型"
          :span="1"
        >
          <el-select
            v-model="formattedWorkorder.WOPLTYPE"
            disabled
          >
            <el-option
              label="一般"
              :value="0"
            />
            <el-option
              label="返工"
              :value="1"
            />
            <el-option
              label="改制"
              :value="2"
            />
            <el-option
              label="补充"
              :value="3"
            />
            <el-option
              label="报废"
              :value="4"
            />
          </el-select>
          <!-- <el-text>{{ formattedWorkorder.WOPLTYPE }}</el-text> -->
        </el-descriptions-item>
        <el-descriptions-item
          label="指令类型"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.commandType || '-' }}</el-text>
        </el-descriptions-item>

        <!-- 第二行 -->
        <el-descriptions-item
          label="料号"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.MATCODE }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="物料描述"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.MATNAME }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="计划交期"
          :span="1"
        >
          <el-text>{{ formatDate(formattedWorkorder.WOCOMDATE) }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="计划数"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOPLANQTY }}</el-text>
        </el-descriptions-item>

        <!-- 第三行 -->
        <el-descriptions-item
          label="排产数"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOSCHEDULEQTY || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="计划开工"
          :span="1"
        >
          <el-text>{{ formatDate(formattedWorkorder.WOPLANDATE) }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="完工数"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOCOMPQTY || '-' }}</el-text>
        </el-descriptions-item>

        <!-- 第四行 -->
        <el-descriptions-item
          label="报废数"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOREJECTQTY || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="完工日期"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOACTUALFINISHDATE || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="加工批号"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOBATCHNO || '-' }}</el-text>
        </el-descriptions-item>

        <!-- 第五行 -->
        <el-descriptions-item
          label="计划号"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOERPID || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="状态"
          :span="1"
        >
          <el-tag :type="getStatusTagType(formattedWorkorder.WOSTATE)">
            {{ getStatusTagText(formattedWorkorder.WOSTATE) || '未开始' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          label="优先级"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOLEVEL || '0' }}</el-text>
        </el-descriptions-item>

        <!-- 第六行 -->
        <el-descriptions-item
          label="包装方式"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.JOPPACKTYPE || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="销售订单号"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOSELLORDER }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="更新人"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.WOOPERATOR || '-' }}</el-text>
        </el-descriptions-item>

        <!-- 第七行 -->
        <el-descriptions-item
          label="更新时间"
          :span="1"
        >
          <el-text>{{ formatDate(formattedWorkorder.LASTPRESCHEDULETIME) }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="原订单号"
          :span="1"
        >
          <el-text>{{ formattedWorkorder.ORIENTORDERID || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item
          label="加工描述"
          :span="3"
        >
          <el-text>{{ formattedWorkorder.WOMANDESCRIPTION || '-' }}</el-text>
        </el-descriptions-item>

        <!-- 第八行 - 备注跨3列 -->
        <el-descriptions-item
          label="备注"
          :span="3"
        >
          <el-text>{{ formattedWorkorder.WOCOMMENTS || '-' }}</el-text>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  workorder: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

// 格式化日期（去掉时间部分）
const formatDate = (dateString) => {
  if (!dateString) return '-';
  return dateString.split('T')[0];
};

// 直接使用传入的 workorder，但补充默认值
const formattedWorkorder = computed(() => ({
  ...props.workorder,
  commandType: props.workorder.commandType || '-',
  scheduledQuantity: props.workorder.scheduledQuantity || '-',
  scrappedQuantity: props.workorder.scrappedQuantity || '-',
  completionDate: props.workorder.completionDate || '-',
  batchNo: props.workorder.batchNo || '-',
  status: props.workorder.status || '未开始',
  priority: props.workorder.priority || '-',
  packaging: props.workorder.packaging || '-',
  updater: props.workorder.updater || '-',
  originalOrderNo: props.workorder.originalOrderNo || '-',
  remark: props.workorder.remark || '-'
}));

// 根据状态获取标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 0: return 'info';
    case 1: return 'primary';
    case 2: return 'warning';
    case 3: return 'success';
    default: return 'info';
  }
};
// 根据状态获取标签文字
const getStatusTagText = (status) => {
  switch (status) {
    case 0: return '新建';
    case 1: return '开始';
    case 2: return '暂停';
    case 3: return '完工';
    default: return '';
  }
};
</script>

<style scoped>
</style>